<template>
  <div class="app-container">
    <div>
      <el-input
        v-model="viewModel.MobilePhone"
        size="small"
        placeholder="手机号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="query"
      />
      <el-button type="primary" @click="query" size="small" icon="el-icon-search">查询</el-button>
      <el-button type="primary" @click="refresh" size="small" icon="el-icon-refresh">刷新</el-button>
    </div>
    <el-table
      v-loading="loading"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data="modelList"
      style="width: 100%;margin-top:30px;"
      height="630"
      border
    >
      <el-table-column label="手机号">
        <template slot-scope="scope">{{ scope.row.MobilePhone }}</template>
      </el-table-column>
      <el-table-column label="邀请码">
        <template slot-scope="scope">{{ scope.row.InviteCode }}</template>
      </el-table-column>
      <el-table-column label="注册时间" sortable="custom" prop="CreateTime">
        <template slot-scope="scope">{{ scope.row.CreateTime}}</template>
      </el-table-column>
      <el-table-column align="center" width="240" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleEdit(scope)" icon="el-icon-scissors">分配学校</el-button>
          <el-button type="text" size="mini" @click="handleDelete(scope)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:15px;" v-if="viewModel.total>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="viewModel.page"
        :page-sizes="[10, 20, 30, 40,100]"
        :page-size="viewModel.pageSize"
        @prev-click="lastPage"
        @next-click="nextPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="viewModel.total"
      ></el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="'分配学校'"
      width="50%"
      top="3vh"
      :close-on-click-modal="false"
    >
      <el-form
        :model="model"
        ref="model"
        :rules="rules"
        label-width="80px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="手机号" prop="MobilePhone">
              <el-input v-model="model.MobilePhone" :disabled="true" placeholder="手机号">
                <!-- <template slot="append">@qdlsai.org</template> -->
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="学校" prop="OrgCode">
              <el-select v-model="model.OrgCode" placeholder="请选学校" style="width:100%">
                <el-option
                  v-for="item in allOrg"
                  :key="item.org_code"
                  :label="item.org_name"
                  :value="item.org_code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">关闭</el-button>
        <el-button type="primary" @click="confirm">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script src="@/js/xskh/index.ts">

</script>